import '../styles/globals.css'
import { MoralisProvider } from 'react-moralis'
import Header from '../components/Header'
import React from 'react'
import { NotificationProvider } from '@web3uikit/core'
import Head from 'next/head'
import { ApolloClient } from '@apollo/client'
import { InMemoryCache } from '@apollo/client'
import { ApolloProvider } from '@apollo/client'

const client = new ApolloClient({
  cache: new InMemoryCache(),
  uri: 'https://api.studio.thegraph.com/query/38711/nft-shop/v0.4'
})
function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>NFTSHOP</title>
        <meta name="description" content="NFTSHOP dapp" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <MoralisProvider
        // @ts-ignore
        // MoralisProvider
        // serverUrl={process.env.MORALIS_SERVER}
        // appId={process.env.MORALIS_APPID}
        initializeOnMount={false}
      >
        <ApolloProvider client={client}>
          <NotificationProvider>
            <Header />
            <Component {...pageProps} />
          </NotificationProvider>
        </ApolloProvider>
      </MoralisProvider>
    </div>
  )
}

export default MyApp
